<template>
    <up-popup
        :show="modelValue"
        @close="emit('update:modelValue', false)"
        :closeable="true"
        round="30rpx"
        :z-index="900"
    >
        <view class="pl-30 pr-30 pb-40">
            <view class="ft-32 bold t-3 pt-26 center">选择修改项</view>
            <view class="ft-28 main pt-10 pb-40">
                <view class="edit-list br-16 mt-20 flex" @click="goEdit('date')">
                    <view class="edit-list-img pt-8">
                        <hj-image src="edit-01.png" height="32rpx" width="32rpx" mode="aspectFit" />
                    </view>
                    <view class="column flex-auto">
                        <text class="bold ft-30">提前退房</text>
                        <text class="t-6 mt-6">{{ formatDate(order?.checkOutDate) }}</text>
                    </view>
                    <view
                        class="align-center"
                        :class="[
                            order?.nights <= 1 || [1, 4].includes(order?.applyStatus)
                                ? 't-9'
                                : 'c-m'
                        ]"
                    >
                        <text>修改</text>
                        <hj-image src="right-03.png" height="24rpx" width="24rpx" mode="aspectFit"
                    /></view>
                </view>
                <view class="edit-list br-16 mt-20 flex" @click="goEdit('tel')">
                    <view class="edit-list-img pt-8">
                        <hj-image src="edit-04.png" height="32rpx" width="32rpx" mode="aspectFit" />
                    </view>
                    <view class="column flex-auto">
                        <text class="bold ft-30">联系方式</text>
                        <text class="t-6 mt-6">{{ order?.contactPhone || '' }}</text>
                    </view>
                    <view class="align-center c-m">
                        <text>修改</text>
                        <hj-image src="right-03.png" height="24rpx" width="24rpx" mode="aspectFit"
                    /></view>
                </view>
                <view class="edit-list br-16 mt-20 flex" @click="goEdit('name')">
                    <view class="edit-list-img pt-8">
                        <hj-image src="edit-03.png" height="32rpx" width="32rpx" mode="aspectFit" />
                    </view>
                    <view class="column flex-auto">
                        <text class="bold ft-30">入住人</text>
                        <text class="t-6 mt-6">{{ order?.contactName || '' }}</text>
                    </view>
                    <view class="align-center c-m">
                        <text>修改</text>
                        <hj-image src="right-03.png" height="24rpx" width="24rpx" mode="aspectFit"
                    /></view>
                </view>
            </view>
            <!-- 底部安全区域 -->
            <hj-safe-footer />
        </view>
    </up-popup>
</template>

<script setup>
/**
 * @description
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'EditPopup'
})

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    order: {
        type: Object,
        default: () => {}
    }
})

const emit = defineEmits(['update:modelValue'])

// 时间格式处理
const formatDate = date => {
    if (!date) {
        return ''
    }
    try {
        const defaultDate = dayjs(date).format('YYYY年MM月DD日')
        const week = dayjs(date).day()
        const weekList = ['日', '一', '二', '三', '四', '五', '六']
        return `${defaultDate} 周${weekList[week]}`
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return ''
    }
}

// 跳转编辑修改页面
const goEdit = type => {
    if (!props.order?.orderNo) return
    if (type === 'date' && (props.order?.nights <= 1 || [1, 4].includes(props.order?.applyStatus)))
        return
    const list = {
        date: `/pages/order/edit-date/index?orderNo=${props.order?.orderNo || ''}&start=${
            props.order?.checkInDate
        }&end=${props.order?.checkOutDate}`,
        tel: `/pages/order/edit-phone/index?orderNo=${props.order?.orderNo || ''}`,
        name: `/pages/order/edit-name/index?orderNo=${props.order?.orderNo || ''}`
    }
    uni.navigateTo({
        url: list[type]
    })
}
</script>

<style scoped lang="scss">
.edit-list {
    background: #f6f7fb;
    padding: 20rpx 24rpx;
    &-img {
        width: 48rpx;
    }
}
.main {
    min-height: 40vh;
}
</style>
